<template>
	<div class="use">
		<!-- tooltip-effect="dark" -->
		<el-button type="primary" size="default" @click="link"> </el-button>

		<el-table
			ref="multipleTable"
			:data="tableData"
			border
			stripe
			style="width: 100%"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" align="center" width="55"> </el-table-column>
			<el-table-column label="日期" width="120">
				<template slot-scope="scope">{{ scope.row.date }}</template>
			</el-table-column>
			<el-table-column prop="name" label="姓名" width="120"> </el-table-column>
			<el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column>
		</el-table>

		<fx-table-paging
			ref="tablePaging"
			:no="true"
			:table-list="tableList"
			:table-column="tableColumnData"
			:table-paging="tablePaging"
			:table-total="tableTotal"
			@handleCrurentChange="handleCrurentChange"
		/>
		<see
			:seeVisible="seeVisible"
			:handleSeeVisible="
				e => {
					seeVisible = e
				}
			"
		/>
	</div>
</template>

<script>
	import Axios from 'axios'
	import { fxTablePaging } from '@/components'
	import { tableColumn } from './config'
	import see from './see'
	export default {
		components: {
			fxTablePaging,
			see
		},
		data() {
			return {
				fileList: [],
				seeVisible: false,
				tablePaging: { page: 1, pagesize: 20, layout: 'total, prev, pager, next, jumper' },
				tableTotal: 102,
				tableColumnData: tableColumn(1, 10, this.dropdownClick, this.see),
				tableList: [
					{
						date: '2016-05-02',
						number: '421',
						name: '王小虎1',
						clientName: '上海市普陀区',
						type: '类型',
						accountNumber: '5',
						section: '开发部',
						proposer: '管理员',
						status: '未完成',
						status1: 1,
						status2: 1,
						status3: 1,
						status4: 1,
						status5: 1,
						status6: 1,
						status7: 1,
						status8: 1
					},
					{
						date: '2016-05-04',
						name: '王小虎2',
						address: '上海市普陀区金沙江路 1517 弄',
						status1: 1,
						status2: 1,
						status3: 2,
						status4: 1,
						status5: 2,
						status6: 1
					},
					{
						date: '2016-05-01',
						name: '王小虎3',
						address: '上海市普陀区金沙江路 1519 弄',
						status1: 1,
						status2: 1,
						status3: 2,
						status4: 2,
						status5: 2,
						status6: 2
					},
					{
						date: '2016-05-03',
						name: '王小虎4',
						address: '上海市普陀区金沙江路 1516 弄',
						status1: 2,
						status2: 2,
						status3: 1,
						status4: 1,
						status5: 2,
						status6: 1
					}
				],
				tableData: [
					{
						date: '2016-05-03',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					},
					{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					}
				]
			}
		},

		methods: {
			link() {
				let obj = {
					a: 1
				}

				Axios({
					method: 'post',
					url: 'https://devapp.bocommlife.com/logPlatform',
					data: obj,
					headers: {
						clientid: 'dvs',
						'Content-Type': 'application/json;charset=UTF-8'
					}
				})
			},
			handleSelectionChange(e) {
				// let a = 1
				console.log(e)
			},
			// 文件列表移除文件时的钩子
			handleRemove(file, fileList) {
				console.log(file)
				console.log(fileList)
			},
			// 文件超出个数限制时的钩子
			handleExceed(files, fileList) {
				this.$message.warning(
					`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
						files.length + fileList.length
					} 个文件`
				)
			},
			// 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
			beforeRemove(file) {
				return this.$confirm(`确定移除 ${file.name}？`).then(x => {
					console.log('确定')
					console.log(x)
				})
			},

			// 查看
			see(row) {
				if (row.a === 1) {
					return
				}
				console.log('查看')
				console.log(row)
				this.seeVisible = true
			},
			// 编辑
			edit(row) {
				console.log('编辑')
				console.log(row)
			},
			// 删除
			delete(row) {
				console.log('删除')
				this.$confirm('删除后不可恢复，确认删除吗?', '删除', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning'
				})
					.then(() => {
						console.log(row)
						console.log('确认')
					})
					.catch(() => {
						console.log('取消')
					})
			},
			// 提交
			submit(row) {
				console.log('提交')
				this.$confirm('确认提交吗?', '提交', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'success'
				})
					.then(() => {
						console.log(row)
						console.log('确认')
					})
					.catch(() => {
						console.log('取消')
					})
			},
			// 撤销
			backout(row) {
				console.log('撤销')
				this.$confirm('确认撤销吗?', '撤销', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'info'
				})
					.then(() => {
						console.log(row)
						console.log('确认')
					})
					.catch(() => {
						console.log('取消')
					})
			},
			// 签收
			signIn(row) {
				console.log('签收')
				this.$confirm('确认签收吗?', '签收', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'success'
				})
					.then(() => {
						console.log(row)
						console.log('确认')
					})
					.catch(() => {
						console.log('取消')
					})
			},
			// 审核
			check(row) {
				console.log('审核')
				console.log(row)
			},
			// 关闭
			close(row) {
				console.log('关闭')
				this.$confirm('确认关闭吗?', '关闭', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'danger'
				})
					.then(() => {
						console.log(row)
						console.log('确认')
					})
					.catch(() => {
						console.log('取消')
					})
			},
			// 查看 点击项目名称的回调
			handleLink(e) {
				console.log(e)
			},
			// 点击分页
			handleCrurentChange(e) {
				console.log(e)
			},
			// 点击操作后的回调
			dropdownClick(e, row) {
				switch (e) {
					case '1':
						this.see(row)
						break
					case '2':
						this.edit(row)
						break
					case '3':
						this.delete(row)
						break
					case '4':
						this.submit(row)
						break
					case '5':
						this.backout(row)
						break
					case '6':
						this.signIn(row)
						break
					case '7':
						this.check(row)
						break
					case '8':
						this.close(row)
						break
					default:
						break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.use {
		padding: 20px 20px;
		.upload {
			display: flex;
			position: relative;

			:deep(.el-upload-list) {
				margin-left: 20px;
				margin-top: -10px;
			}
		}
	}
</style>
